<template>
    <div class="app-container">
        <!--查询部分-->
        <div class="query-form">
            <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
                <el-form-item label="货主名称" label-width="90px">
                    <el-input v-model="tableSearchParam.shipperName" style="width:200px" size="small"
                              clearable></el-input>
                </el-form-item>
                <el-form-item label="状态" label-width="90px">
                    <el-select v-model="tableSearchParam.statusId" clearable placeholder="请选择">
                        <el-option
                                v-for="item in statusList"
                                :value="item.statusId"
                                :key="item.statusId"
                                :label="item.statusName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号码" label-width="90px">
                    <el-input v-model="tableSearchParam.shipperPhone" style="width:200px" size="small"
                              clearable></el-input>
                </el-form-item>
                <el-form-item label="起点地址" label-width="90px">
                    <RegionSelect :handle-address-change="handleFromAddressChange"></RegionSelect>
                </el-form-item>
                <el-form-item label="目的地址" label-width="90px">
                    <RegionSelect :handle-address-change="handleToAddressChange"></RegionSelect>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryData" icon="el-icon-search" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--列表部分-->
        <el-table :data="dataList" highlight-current-row v-loading="listLoading">
            <el-table-column prop="id" label="委托单号" width="100"/>
            <el-table-column prop="shipperName" label="货主名称" width="200"/>
            <el-table-column prop="shipperPhone" label="手机号码" width="100"/>
            <el-table-column prop="statusName" label="单据状态" width="160"/>
            <el-table-column prop="from" label="起始地点" width="200">
                <template slot-scope="scope">
                    <span>{{scope.row.fromProvinceName}}{{scope.row.fromCityName}}{{scope.row.fromCountyName}}{{scope.row.fromAddressDetail}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="to" label="目的地点" width="200">
                <template slot-scope="scope">
                    <span>{{scope.row.toProvinceName}}{{scope.row.toCityName}}{{scope.row.toCountyName}}{{scope.row.toAddressDetail}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="useTime" label="用车时间" width="250">
                <template slot-scope="scope">
                    <span>{{scope.row.loadingBeginTime}}--{{scope.row.loadingEndTime}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="createdDate" label="创建时间" width="140">
                <template slot-scope="scope">
                    <span>{{scope.row.createdDate}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="specialRequirements" label="特殊要求" width="200"/>
            <el-table-column prop="comments" label="备注" width="200"/>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="small" @click="showDetail(scope.row)" icon="el-icon-document">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=this.pagination.pageNum
                    :page-sizes="[20, 50, 100]"
                    :page-size=this.pagination.pageSize
                    layout="total, sizes, prev, pager, next"
                    :total=this.pagination.total style="float:right;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  import { getPage } from '@/api/orderCenterApi'
  import { formatDate } from '@/utils/dateUtil'
  import RegionSelect from '@/components/RegionSelect';

  export default {
    name: 'index',
    components:{RegionSelect},
    data() {
      return {
        primarykey: 'id',
        tableSearchParam: {},
        form: {},
        queryParams: {},
        listLoading: false,
        selectedRowKeys: [],
        pagination: {
          showSizeChanger: true,
          pageSize: 20,
          pageNum: 1,
          total: 0
        },
        statusList: [
          { statusId: '10', statusName: '新建' },
          { statusId: '20', statusName: '已发布' },
          { statusId: '30', statusName: '申请中' },
          { statusId: '40', statusName: '进行中' },
          { statusId: '60', statusName: '已送达' },
          { statusId: '500', statusName: '异常处理中' },
          { statusId: '1000', statusName: '已完成' },
          { statusId: '0', statusName: '已删除' }
        ],
        loading: false,
        dataList: [],
      }
    },
    methods: {
      showDetail(row) {
        const { id } = row
        sessionStorage.setItem('orderCenterId', row[this.primarykey])
        this.$router.push('/truckorder/ordercenterdetail')
      },
      queryData() {
        const queryParams = {
          criteria: {
            ...this.tableSearchParam
          },
          pageDto: {
            ...this.pagination
          }
        }
        getPage(queryParams).then(response => {
          if (!response.hasError) {
            this.dataList = []
            const { list = [] } = response.result
            list.forEach(item => {
              this.dataList.push({
                ...item,
                loadingBeginTime: formatDate(item.loadingBeginTime),
                loadingEndTime: formatDate(item.loadingEndTime),
                createdDate: formatDate(item.createdDate)
              })
            })
            this.pagination.total = response.result.total
          }
        })
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.queryData()
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val
        this.queryData()
      },
      handleFromAddressChange(value) {
        let regionList = [...value, '', '', '']
        this.tableSearchParam.fromProvinceId = regionList[0]
        this.tableSearchParam.fromCityId = regionList[1]
        this.tableSearchParam.fromCountyId = regionList[2]
        this.tableSearchParam.fromAddressDetail = regionList[3]
      },
      handleToAddressChange(value) {
        let regionList = [...value, '', '', '']
        this.tableSearchParam.toProvinceId = regionList[0]
        this.tableSearchParam.toCityId = regionList[1]
        this.tableSearchParam.toCountyId = regionList[2]
        this.tableSearchParam.toAddressDetail = regionList[3]
      }
    },
    mounted() {
      this.queryData()
    }
  }
</script>

<style scoped>

</style>
